<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/11
  Time: 20:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"  media="all">
</head>
<body>
<%--头部多条件查询--%>
<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="rolename" class="layui-input">
        </div>
    </div>
        <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status" >
                <option value="">请选择</option>
                <option value="1">正常</option>
                <option value="0">注销</option>
            </select>
        </div>
    </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="query" lay-submit>查询</button>
            </div>
        </div>
</form>
   <table id="roleTable" class="layui-hide" lay-filter="roleTable"></table>

   <script type="text/html" id="roleToolbar">
       <div class="layui-btn-container">
           <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
           <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
           <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
       </div>
   </script>
   <script type="text/html" id="innerToolBar">
       <div class="layui-btn-container">
           <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
           <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
           <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
       </div>
   </script>

   <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['layer','form','table','jquery'],function () {
        var layer=layui.layer
            , form=layui.form;
        var table=layui.table;
        var $=layui.$;
        //表单提交监听事件
        form.on('submit(query)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            table.reload("roleTable",{
                where:{//查询条件
                    params:data.field// 会封装到LayRequest中的params中去
                },
                page:{
                    curr:1//当前页
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        table.render({
            elem: "#roleTable",
            url:"${pageContext.request.contextPath}/role/layList",
            toolbar:'#roleToolbar',
            defaultToolbar:['filter','print','exports'],
            cols:[[
                {type:'checkbox',fixed:'left'},
                {field:'id',title:"ID",width:60},
                {field:'rolename',title:"角色名",width:150},
                {field:'explain',title:"描述",width:100},
                {field:'operator',title:"操作人",width:80,
                     templet:function (res) {
                    if (res.operatorAdmin!=null){
                        return res.operatorAdmin.account;
                    }else {
                        return "";
                    }

                     }
                },
                {field:'createtime',title:"创建时间",width:300},
                {field:'status',title:"状态",width:100,
                templet:function (res) {
                     if (res.status=="1") return "正常";
                         return "注销";
                }},
                {fixed:'right',title:"操作",width:200,toolbar: "#innerToolBar"}

            ]],
            page:true
        })
        layer.msg("Hello word");
        //监听事件
        table.on('toolbar(roleTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        title:"角色新增",
                        type:2,//为ifram层，可以加载其他的页面到弹出层
                        content:"${pageContext.request.contextPath}/role/toadd",
                        area:['500px','400px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
                case 'delete':
                    layer.msg('删除');
                    console.log(checkStatus)
                    console.log(checkStatus.data)
                    if (checkStatus.data.length==0){
                        layer.alert("请至少选择一项删除");
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取ID值，并放入数组
                    for (var i=0;i<data.length;i++){
                        idArray.push(data[i].id);
                    }
                    console.log(idArray);
                    //执行批量删除
                    $.post("${pageContext.request.contextPath}/role/batchDelete",
                        {ids:idArray.join(",")},function (result) {
                            if(result.code==0){
                                layer.msg("删除成功");
                                table.reload("roleTable",{
                                    page:{
                                       curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("删除失败")
                        },"json")
                    break;

                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });


        table.on('tool(roleTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;//获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case 'delete':
                    layer.alert("删除该行记录，id:" + data.id)
                    //todo 发ajax请求异步数据
                    break;
                case 'update':
                    layer.msg("修改")
                    layer.open({
                        title:"角色修改",//标题
                        type:2,
                        content:"${pageContext.request.contextPath}/role/toupdate?id="+data.id,
                        area:['500px','400px'],
                        mamin:true
                    })
                    break;
                case 'add':
                    layer.open({
                        title:"角色新增",
                        type:2,//为ifram层，可以加载其他的页面到弹出层
                        content:"${pageContext.request.contextPath}/role/toadd",
                        area:['500px','400px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
            }
        })
    });

</script>
</body>
</html>
